import React, { useState, useRef} from 'react';
import ReactDOM from 'react-dom';

let lastRef: any;
function Child(props: any){
  return (
    <div>
      <input type="text" ref={props.xx}/>
    </div>
  )
}

function Parent(){
  const [number, setNumber] = useState(0);
  const refObject = useRef(); //这个ref 每次调用Prent都是返回的同一个

  function getFocus(){
    console.log('refObject:',refObject);
    //@ts-ignore
    refObject.current.focus()
  }
  // 我们想要在父组件中拿到子组件的某个dom 虽然下面这样能拿到
  // 但我们希望 xx={refObject} 可以变成 ref={refObject}
  // 但直接该会报错 react不允许函数组件上有ref属性(可以将ref设置在类组件上)
  // 需要使用React.forwardRef 进行转发
  return (
    <div>
      <Child xx={refObject}/>
      <button onClick={getFocus}>获得焦点</button>
      <button onClick={()=>setNumber(x=>x+1)}>+</button>
    </div>
  )
}

ReactDOM.render(<Parent/>, document.getElementById('root'));
